<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./百度模态框.css">
    <link rel="stylesheet" href="../img/百度/iconfont.css">
    <link rel="stylesheet" href="../img/百度2/iconfont.css">
</head>

<body>
    <!-- 头部 -->
    <header>
        <!-- 左侧 -->
        <ul class="header-l">
            <li><a href="#">新闻</a></li>
            <li><a href="#">hao123</a></li>
            <li><a href="#">地图</a></li>
            <li><a href="#">贴吧</a></li>
            <li><a href="#">视频</a></li>
            <li><a href="#">图片</a></li>
            <li><a href="#">网盘</a></li>
            <li><a href="#">更多</a></li>
        </ul>
        <!-- 右侧 -->
        <div class="header-r">
            <button class="but">设置</button>
            <button class="box on">登录</button>
        </div>
    </header>
    <!-- 内容 -->
    <main class="banxin">
        <!-- 上 -->
        <div class="picture">
            <a href="https://www.baidu.com/"><img src="./img/百度/baidu-01.png" alt=""></a>
        </div>
        <div class="search">
            <input type="text" name="" id="">
            <span class="elf"></span>
            <button>百度一下</button>
        </div>
        <!-- 中 -->
        <div class="trending">
            <a href="#">百度热搜 ></a>
            <a href="#">
                <span class="iconfont icon-shuaxin">换一换</span>
            </a>
        </div>
        <ul>
            <li>
                <span class="iconfont icon-xiangshang red"></span>
                <span class="text">祖国接你回家</span>
            </li>
            <li>
                <span class="iconfont icon-shuzi3 org"></span>
                <span class="text">人从众！五一首日景区实况</span>
            </li>
            <li>
                <span class="iconfont icon-number-one red"></span>
                <span class="text">人从众！五一首日景区实况</span>
            </li>
            <li>
                <span class="iconfont icon-shuzi4 ccc"></span>
                <span class="text">祖国接你回家</span>
            </li>
            <li>
                <span class="iconfont icon-number-two org"></span>
                <span class="text">祖国接你回家</span>
            </li>
            <li>
                <span class="iconfont icon-dian ccc"></span>
                <span class="text">祖国接你回家</span>
            </li>
        </ul>
        <!-- 下 -->
    </main>

    <!-- 右侧边栏 -->
    <div class="nav">
        <div class="nav-a">
            <div class="nav-b"></div>
        </div>
        <div class="nav-c">
            <img src="../img/百度/二维码.png" alt="">
        </div>
    </div>

    <!-- 模态框 -->
    <div class="modal active">
        <!-- 中间框 -->
        <div class="modal-a">
            <!-- 上 -->
            <div class="modal-b">
                <!-- 左 -->
                <div class="modal-l">
                    <!-- 上 -->
                    <div class="modal-t">
                        <!-- 左 -->
                        <div class="modal-tl">
                            <img src="../img/百度/模态框二维码.png" alt="">
                        </div>
                        <!-- 右 -->
                        <div class="modal-tr">
                            <img src="../img/百度/模态框-2.png" alt="">
                        </div>
                    </div>
                    <!-- 下 -->
                    <div class="modal-floor">
                        <h4>请使用百度APP扫码登录</h2>
                            <a href="#">
                                <img src="../img/百度/百度狗手掌.png" alt="">
                                <span>下载百度APP</span>
                            </a>
                    </div>
                </div>
                <!-- 右 -->
                <div class="modal-r">
                    <!-- 上 -->
                    <ul>
                        <li>账号登录</li>
                        <li>短信登录</li>
                    </ul>
                    <!-- 下 -->
                    <p class="title">验证即登录，未注册将自动创建百度账号</p>
                    <p><input type="text" name="" id="" placeholder="请输入手机号" class="inp-one"></p>
                    <p><input type="text" name="" id="" placeholder="验证码" class="inp-two"></p>
                    <button>登录</button>
                    <p class="type">
                        <span>阅读并接受</span><a href="#">百度用户协议</a><span>和</span><a href="#">隐私政策</a>
                    </p>
                </div>
            </div>
            <!-- 下：QQ-微信-微博 -->
            <div class="modal-botton">
                <div class="modal-botton-a">
                    <a href="#" class="iconfont icon-QQ-circle-fill qq"></a>
                    <a href="#" class="iconfont icon-weibo-copy wb"></a>
                    <a href="#" class="iconfont icon-weixin-copy wx"></a>
                </div>
                <div class="modal-botton-b">
                    <a href="#">立即注册</a>
                </div>
            </div>
            <!-- 百度log -->
            <div class="log">
                <img src="../img/百度/baidu-01.png" alt="">
            </div>
            <!-- X符号 -->
            <div class="close"></div>

            <!-- 发送验证码 -->
            <button class="auth">发送验证码</button>
        </div>
    </div>
    <script>
        window.addEventListener('load', function() {
            let btn = this.document.querySelector('.box')
            let clo = this.document.querySelector('.close')
            let mod = this.document.querySelector('.modal')
            console.log(btn, clo, mod);
            btn.addEventListener('click', function() {
                mod.classList.remove('active')
            })

            clo.addEventListener('click', function() {
                mod.classList.add('active')
            })
        })
    </script>
</body>

</html>